<!-- 对el-card的二次封装 -->
<template>
  <div id="mycard">
    <el-card
      class="box-card"
      :style="{
        backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
        color: bgcColor.color === '#000' ? '#828690' : '#fff'
      }"
    >
      <template #header>
        <div class="card-header">
          {{ title }}
        </div>
      </template>
      <!-- 卡片内容 -->
      <slot name="default"></slot>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, withDefaults, computed } from 'vue'

import { useStore } from 'vuex'

const store = useStore()

// 当前背景主题
const bgcColor = computed(() => store.state.Background)

interface PropsTypes {
  title: string
}

const props = withDefaults(defineProps<PropsTypes>(), {
  title: '默认标题'
})
</script>

<style scoped lang="less">
#mycard {
  .el-card {
    border: 1px solid transparent !important;
  }
}
</style>
